/**
 * @file MixedReality.vue
 * @description 混合现实教学功能页面
 * @created 2024-03-20
 */

<template>
  <div class="mixed-reality">
    <div class="page-header">
      <h2>混合现实教学</h2>
    </div>
    
    <!-- AR/VR课程列表 -->
    <div class="course-grid">
      <div class="course-card" v-for="course in courses" :key="course.id">
        <div class="course-preview">
          <img :src="course.preview" :alt="course.name">
          <div class="course-type">{{ course.type }}</div>
        </div>
        <div class="course-info">
          <h3>{{ course.name }}</h3>
          <p>{{ course.description }}</p>
          <div class="course-stats">
            <span>{{ course.duration }}</span>
            <span>{{ course.students }}人学习</span>
          </div>
          <button class="start-btn">开始学习</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const courses = ref([
  {
    id: 1,
    name: '数字电路虚拟实验室',
    description: '通过VR技术体验数字电路实验',
    type: 'VR',
    preview: '/images/vr-lab.jpg',
    duration: '2小时',
    students: 156
  },
  {
    id: 2,
    name: 'AR解剖学教学',
    description: '使用AR技术学习人体解剖结构',
    type: 'AR',
    preview: '/images/ar-anatomy.jpg',
    duration: '1.5小时',
    students: 89
  }
])
</script>

<style scoped>
.mixed-reality {
  padding: 24px;
}

.course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.course-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.course-preview {
  position: relative;
  height: 200px;
  background: #f0f0f0;
}

.course-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.course-type {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 12px;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border-radius: 4px;
}

.course-info {
  padding: 20px;
}

.course-stats {
  display: flex;
  justify-content: space-between;
  color: #666;
  margin: 12px 0;
}

.start-btn {
  width: 100%;
  padding: 8px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style> 